<script lang="ts">
import Vue from 'vue'
import {mapState} from "vuex";

export default Vue.extend({
  name: "home",
  onLoad() {
    if (this.locale) {
      uni.switchTab({url: '/pages/index/index'})
      return;
    }
  },
  computed: {
    ...mapState(["systemInfo", "locale"])
  },
  methods: {
    onClick(lang: string) {
      this.$store.dispatch('setLang', lang);
      uni.switchTab({url: '/pages/index/index'})
    }
  }
})
</script>

<template>
  <view>
    <view class="bg-box">
      <view :style="{height: `${systemInfo.statusBarHeight + 44}px`}"/>
      <image class="bg-image" src="/static/icon/home/print_image.jpg"/>

      <view class="column-center button-box">
        <view @click="onClick('ug-CN')" :class="['center button', locale  === 'ug-CN' ? 'selected':'']"
              hover-class="hover">
          ئۇيغۇرچە
        </view>

        <view @click="onClick('zh-CN')" :class="['center button',  locale === 'zh-CN' ? 'selected':'']"
              style="font-weight: 400" hover-class="hover">
          （国语）中文
        </view>
      </view>

    </view>
  </view>
</template>

<style scoped lang="scss">
.bg-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 14%);
  height: 100vh;
}

.bg-image {
  width: 100%;
  height: 970rpx
}

.button-box {
  gap: 22rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 180rpx;
  padding: 0 40rpx 0 40rpx;
  background: white;
}

.button {
  border-radius: 100rpx;
  width: 100%;
  padding: 38rpx;
  gap: 10px;
  color: #545454;
  font-size: 36rpx;
  transition: background 0.4s ease, color 0.4s ease; /* 添加渐变过渡 */
  background: linear-gradient(0deg, #F2F2F2 0%, #F2F2F2 100%);
}

.selected {
  transition: background 0.4s ease, color 0.4s ease; /* 添加渐变过渡 */
  color: #ffffff;
  background: linear-gradient(180deg, rgba(17, 126, 255, 1) 0%, rgba(38, 124, 225, 1) 100%);
  box-shadow: 0 10rpx 10rpx 0 rgba(195, 222, 255, 0.5);
}
</style>